<script setup lang='ts'>
import { genOssUrl, oss } from '@fl/logics/oss'
import SlideVerify, { type SlideVerifyInstance } from 'vue3-slide-verify'
import 'vue3-slide-verify/dist/style.css'

const emits = defineEmits<{
    success: []
}>()
const visible = defineModel<boolean>('visible', { default: false, required: true })
const isHuman = ref(false)

const imgs = [
    genOssUrl(oss.mall.captcha1),
    genOssUrl(oss.mall.captcha2),
    genOssUrl(oss.mall.captcha3),
    genOssUrl(oss.mall.captcha4),
    genOssUrl(oss.mall.captcha5),
]

const block = ref<SlideVerifyInstance>()

function onSuccess() {
    isHuman.value = true
    visible.value = false
    emits('success')
}

function onFail() {
    ElMessage.error('验证失败，请重试！')
    block.value?.refresh()
}

const show = computed(() => {
    return visible.value && !isHuman.value
})

function cancel() {
    visible.value = false
}

defineExpose({
    isHuman,
})
</script>

<template>
    <PlusDialog v-model="show"
                title="请完成安全验证"
                width="500"
                :has-footer="false"
                :close-on-click-modal="false"
                destroy-on-close
                align-center
                @cancel="cancel"
    >
        <div class="p-20"
             style="border-top: 1px solid #000;"
        >
            <SlideVerify ref="block"
                         :imgs="imgs"
                         slider-text="向右滑动完成验证"
                         :accuracy="5"
                         :w="420"
                         @success="onSuccess"
                         @fail="onFail"
            />
        </div>
    </PlusDialog>
</template>
